<template>
    <n-flex vertical>
        <n-card title="选择组件" :segmented="true" size="small">
            <n-flex>
                <app-crontab-select flex-1 v-model:value="cronExpression" placeholder="请选择cron表达式" clearable />
                <app-crontab-select flex-1 v-model:value="cronExpression" placeholder="请选择cron表达式" clearable />
                <app-crontab-select flex-1 v-model:value="cronExpression" placeholder="请选择cron表达式" clearable />
                <app-crontab-select flex-1 v-model:value="cronExpression" placeholder="请选择cron表达式" clearable />
                <app-crontab-select flex-1 v-model:value="cronExpression" placeholder="请选择cron表达式" clearable />
                <app-crontab-select flex-1 v-model:value="cronExpression" tab-type="card" placeholder="请选择cron表达式" clearable />
            </n-flex>
        </n-card>

        <n-card title="crontab组件" :segmented="true" size="small">
            <n-flex>
                <n-button flex-1 @click="show"> CRON选择器 </n-button>
                <n-button flex-1 @click="show"> CRON选择器 </n-button>
                <n-button flex-1 @click="show"> CRON选择器 </n-button>
                <n-button flex-1 @click="show"> CRON选择器 </n-button>
                <n-button flex-1 @click="show"> CRON选择器 </n-button>
            </n-flex>

            <app-crontab-modal :show="visiable" @update:closed="hide" :value="cronExpression" @update:value="handleUpdateValue" />
        </n-card>

        <n-card title="crontab组件面板" :segmented="true" size="small">
            <n-flex>
                <app-crontab flex-1 v-model:value="cronExpression" />
                <app-crontab flex-1 tab-type="card" v-model:value="cronExpression" />
            </n-flex>
        </n-card>
    </n-flex>
</template>

<script setup lang="ts">
import { AppCrontabSelect, AppCrontabModal, AppCrontab } from "@scpun/components";
import { useVisiable } from "@scpun/hooks";

const cronExpression = ref("");
const { visiable, show, hide } = useVisiable();

function handleUpdateValue(value: string) {
    cronExpression.value = value;
    hide();
}
</script>
